@font-face {
  font-family: "Yunmobei_enfont";
  src: url("../assets/fonts/Yunmobei_enfont-Regular.woff2") format("truetype");
  font-weight: normal;
  font-style: normal;
}

.app {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url("../assets/image/blueScenery.jpg");
  background-size: cover;
}

.logo {
  position: fixed;
  top: 20px;
  left: 20px;
}

.mian {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -95%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.title {
  text-align: center;
  line-height: 170px;
  font-family: "Yunmobei_enfont", sans-serif;
  font-size: 150px;
  margin-bottom: 10px;
  font-weight: bold;
  background-image: linear-gradient(45deg,
      #ebac71,
      #ff7f00,
      #103363,
      #5bc9cb,
      red,
      #32cd32);
  background-clip: text;
  color: transparent;
  /* -webkit-box-reflect: below -10px linear-gradient(to bottom, transparent 0%, white); */
  /*动画效果*/
  background-size: 350% 100%;
  animation: gradientAnimation 5s ease-in infinite;
  animation-direction: alternate;
}

.tag {
  color: white;
  font-size: 30px;
}

.description {
  color: white;
  margin-top: 10px;
  font-size: 20px;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0;
  }

  to {
    background-position: 100%;
  }
}

@keyframes colorChange {
  0% {
    color: white;
  }

  10% {
    color: blue;
  }

  20% {
    color: yellow;
  }

  30% {
    color: pink;
  }

  40% {
    color: green;
  }

  50% {
    color: red;
  }

  60% {
    color: black;
  }

  70% {
    color: palegreen;
  }

  80% {
    color: greenyellow;
  }

  90% {
    color: salmon;
  }

  100% {
    color: white;
  }
}